const webpack = require('webpack')
const commonConfig = require('./webpack.common')
const { merge } = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = merge(commonConfig, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    // 解决问题：静态资源的访问，默认访问webpack打包会产出的文件
    // contentBase: [], // 开发环境中告诉server静态资源文件访问的路径，上线前才copy到打包目录
    // 解决问题：同源布署的情况下，开发阶段接口的跨域问题 => 代理API服务
    proxy: {
      '/api': { // 为api url匹配的请求配置代理
        // http://localhost:8080/api/users -> https://api.github.com/api/users
        target: 'https://api.github.com',
        pathRewrite: {
          '^/api': ''
        },
        // 不能作用 localhost:8080 作为请求的主机名，以代理主机名去申请
        changeOrigin: true
      }
    },
    // 解决问题：热替换,不需要刷新页面. 样式文件的热更新loader有额外处理，所以可以开箱即用。其它资源再额外处理。
    // hot: true,
    // 解决问题：热替换失败，会回退热刷新，不易发现热替换的错误信息
    hotOnly: true,
  },
  module: {
    rules: [
      {
        test: /.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    // DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用
    new webpack.DefinePlugin({
      BASE_URL: '/public/'
    }),
    new HtmlWebpackPlugin({ // 自动生成绑定打包结果的html
      template: './public/index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
})